<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<!-- 用户头像 -->
			<view class="avatar-container">
				<image class="avatar" :src="userInfo.avatar || '/static/avatar/empty.png'" mode="aspectFill">
				</image>
			</view>
		</view>

		<!-- 基本信息卡片 -->
		<view class="info-card">
			<view class="card-header">
				<uni-icons type="person" size="18" color="#ffffff"></uni-icons>
				<text class="card-title">基本信息</text>
			</view>
			<view class="info-item">
				<text class="info-label">用户名</text>
				<text class="info-value">{{ userInfo.username }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">性别</text>
				<text class="info-value">{{ formatGender(userInfo.gender) }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">用户状态</text>
				<text class="info-value">
					<text class="status-badge"
						:class="'status-' + userInfo.status">{{ formatStatus(userInfo.status) }}</text>
				</text>
			</view>
			<view class="info-item">
				<text class="info-label">备注</text>
				<text class="info-value">{{ userInfo.comment || '无' }}</text>
			</view>
		</view>

		<!-- 修改联系方式卡片部分 -->
		<view class="info-card">
			<view class="card-header">
				<uni-icons type="phone" size="18" color="#ffffff"></uni-icons>
				<text class="card-title">联系方式</text>
			</view>
			<view class="info-item">
				<text class="info-label">手机号码</text>
				<text class="info-value phone-number" @click="callPhone(userInfo.mobile)">
					{{ userInfo.mobile }}
				</text>
			</view>
			<view class="info-item">
				<text class="info-label">短码</text>
				<text class="info-value phone-number" @click="callPhone(userInfo.short)">
					{{ userInfo.short || '未设置' }}
				</text>
			</view>
			<view class="info-item">
				<text class="info-label">座机</text>
				<text class="info-value phone-number" @click="callPhone(userInfo.phone)">
					{{ userInfo.phone || '未设置'  }}
				</text>
			</view>
		</view>

		<!-- 组织信息卡片 -->
		<view class="info-card">
			<view class="card-header">
				<uni-icons type="staff" size="18" color="#ffffff"></uni-icons>
				<text class="card-title">组织信息</text>
			</view>
			<view class="info-item">
				<text class="info-label">所属部门</text>
				<view class="info-value">
					<view class="tag-container">
						<text class="tag">{{ userInfo.d_ids && userInfo.d_ids.text ? userInfo.d_ids.text : '无' }}</text>
					</view>
				</view>
			</view>
			<view class="info-item">
				<text class="info-label">担任职务</text>
				<view class="info-value">
					<view class="tag-container">
						<text class="tag">{{ userInfo.j_ids && userInfo.j_ids.text ? userInfo.j_ids.text : '无' }}</text>
					</view>
				</view>
			</view>
			<view class="info-item">
				<text class="info-label">用户角色</text>
				<view class="info-value">
					<view class="tag-container">
						<text class="tag">{{ userInfo.role && userInfo.role.text ? userInfo.role.text : '无' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 登录信息卡片 -->
		<view class="info-card">
			<view class="card-header">
				<uni-icons type="clock" size="18" color="#ffffff"></uni-icons>
				<text class="card-title">登录信息</text>
			</view>
			<view class="info-item">
				<text class="info-label">注册信息</text>
				<view class="info-value">
					<view class="time-info">
						<view class="time-item">
							<text class="time-label">注册时间:</text>
							<text class="time-value">{{ formatDate(userInfo.register_date) }}</text>
						</view>
						<view class="time-item">
							<text class="time-label">注册IP:</text>
							<text class="time-value">{{ userInfo.register_ip || '未知' }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info-item">
				<text class="info-label">最后登录:</text>
				<view class="info-value">
					<view class="time-info">
						<view class="time-item">
							<text class="time-label">登录时间:</text>
							<text class="time-value">
								{{ userInfo.last_login_date ? formatDate(userInfo.last_login_date) : '从未登录' }}
							</text>
						</view>
						<view class="time-item">
							<text class="time-label">登录IP:</text>
							<text class="time-value">{{ userInfo.last_login_ip || '未知' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 添加默认嵌套结构防止报错
				userInfo: {
					d_ids: {},
					j_ids: {},
					role: {}
				},
				avatar: "/static/avatar/empty.png",
				statusMap: {
					0: '正常',
					1: '禁用',
				}
			}
		},
		mounted() {
			const userData = uni.$router.params.item || uni.getStorageSync('userInfo');
			// 确保嵌套结构存在
			this.userInfo = {
				...this.userInfo,
				...userData
			};
		},
		methods: {
			formatGender(gender) {
				const genders = {
					0: '未知',
					1: '男',
					2: '女'
				};
				return genders[gender] || '未知';
			},
			formatStatus(status) {
				const statuses = {
					0: '正常',
					1: '禁用',
					2: '审核中',
					3: '审核拒绝'
				};
				return statuses[status] || '未知状态';
			},
			// 修改 formatDate 方法
			formatDate(timestamp) {
				if (!timestamp) return '未知';

				// 处理不同格式的日期字符串
				let date;
				if (typeof timestamp === 'string') {
					// 替换空格为 T 的格式（ISO 8601）
					if (timestamp.includes(' ')) {
						timestamp = timestamp.replace(' ', 'T');
					}
					// 处理无时区的日期格式
					if (!timestamp.includes('+') && !timestamp.includes('Z') && timestamp.includes('T')) {
						timestamp += 'Z'; // 添加 UTC 时区标识
					}
				}

				// 尝试创建 Date 对象
				try {
					date = new Date(timestamp);
					// 检查日期是否有效
					if (isNaN(date.getTime())) {
						throw new Error('Invalid date');
					}
				} catch (e) {
					// 如果解析失败，尝试其他格式
					if (typeof timestamp === 'string') {
						// 尝试斜杠格式
						if (timestamp.includes('-')) {
							timestamp = timestamp.replace(/-/g, '/');
						}
						date = new Date(timestamp);
						if (isNaN(date.getTime())) {
							return '未知';
						}
					} else {
						return '未知';
					}
				}

				// 格式化日期
				const pad = (n) => n.toString().padStart(2, '0');
				return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
			},
			// 合并三个拨打方法
			callPhone(phoneNumber) {
				if (!phoneNumber) return;
				uni.makePhoneCall({
					phoneNumber: String(phoneNumber)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f7fa;
		color: #333;
		padding: 40rpx 20rpx 20rpx;
		max-width: 1200rpx;
		margin: 0 auto;
	}

	.header {
		text-align: center;
		padding: 60rpx 0 30rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		left: 20rpx;
		top: 60rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page-title {
		font-size: 48rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 20rpx;
	}

	.page-subtitle {
		color: #7f8c8d;
		font-size: 24rpx;
		margin-bottom: 40rpx;
	}

	.avatar-container {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		border: 6rpx solid #fff;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 80rpx;
		font-weight: bold;
	}

	.info-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 40rpx;
		overflow: hidden;
		transition: transform 0.3s ease;
	}

	.info-card:hover {
		transform: translateY(-6rpx);
	}

	.card-header {
		padding: 32rpx 40rpx;
		background-color: #5555ff;
		border-bottom: 2rpx solid #eaeaea;
		font-weight: 600;
		color: #2979ff;
		display: flex;
		align-items: center;

		.card-title {
			color: #ffffff;
		}
	}

	.card-header uni-icons {
		margin-right: 16rpx;
	}


	.info-item {
		display: flex;
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		width: 200rpx;
		color: #7f8c8d;
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.info-value {
		flex: 1;
		color: #2c3e50;
		font-size: 24rpx;
		font-weight: 500;
		word-break: break-all;
	}

	.status-badge {
		display: inline-block;
		padding: 8rpx 20rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-0 {
		background-color: #e8f5e9;
		color: #2e7d32;
	}

	.status-1 {
		background-color: #ffebee;
		color: #c62828;
	}

	.status-2 {
		background-color: #fff8e1;
		color: #f57f17;
	}

	.status-3 {
		background-color: #f5f5f5;
		color: #616161;
	}

	.mobile-verified {
		background-color: #e3f2fd;
		color: #1565c0;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-left: 16rpx;
	}

	.mobile-unverified {
		background-color: #ffecb3;
		color: #ff8f00;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-left: 16rpx;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.tag {
		background-color: #e3f2fd;
		color: #1976d2;
		padding: 8rpx 20rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
	}

	.time-info {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
	}

	.time-item {
		background: #f8f9fa;
		padding: 16rpx 24rpx;
		border-radius: 16rpx;
		flex: 1;
		min-width: 280rpx;
	}

	.time-label {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-bottom: 8rpx;
		margin-right: 10rpx;
	}

	.time-value {
		font-size: 24rpx;
		font-weight: 500;
		color: #2c3e50;
		margin-left: 10rpx;
	}

	@media (max-width: 768px) {
		.container {
			padding: 20rpx;
		}

		.header {
			padding: 40rpx 0 30rpx;
		}

		.info-label {
			width: 100%;
			margin-bottom: 10rpx;
		}

		.info-item {
			flex-direction: column;
			padding: 24rpx 30rpx;
		}

		.time-info {
			flex-direction: column;
			gap: 16rpx;
		}
	}

	/* 添加以下新样式 */
	.phone-number {
		color: #007AFF;
		/* 使用系统蓝色表示可点击 */
		text-decoration: underline;
		/* 添加下划线提示可点击 */
		cursor: pointer;
		/* 鼠标指针变为手型 */
		transition: all 0.2s ease;
		/* 添加过渡效果 */
	}

	/* 添加点击反馈效果 */
	.phone-number:active {
		color: #0055cc;
		/* 点击时颜色变深 */
		transform: translateY(1px);
		/* 轻微下移效果 */
		text-decoration: none;
		/* 点击时下划线消失 */
	}

	/* 媒体查询中增加响应式样式 */
	@media (max-width: 768px) {
		.phone-number {
			font-size: 28rpx;
			/* 在移动端稍微增大字号 */
			padding: 4rpx 0;
			/* 增加点击区域 */
		}
	}
</style>